<!--<template>-->
<!--  <div>-->
<!--    &lt;!&ndash; 头部区域 &ndash;&gt;-->
<!--    <div class="header-area">-->
<!--      <div class="header-content">-->
<!--        &lt;!&ndash; 商城名称 &ndash;&gt;-->
<!--        <div class="store-name animated-text">淘京商城</div>-->
<!--        &lt;!&ndash; 商品分类列表 &ndash;&gt;-->
<!--        <div class="category-list">-->
<!--          <div-->
<!--              class="category-item"-->
<!--              v-for="category in categories"-->
<!--              :key="category.value"-->
<!--              @click="searchProductByCategory(category.value)"-->
<!--          >-->
<!--            <span v-if="category.label === '种类: '"><strong style="font-size: 20px;">{{-->
<!--                category.label-->
<!--              }}</strong></span>-->
<!--            <span v-else>{{ category.label }}</span>-->
<!--          </div>-->
<!--        </div>-->
<!--        &lt;!&ndash; 搜索区域 &ndash;&gt;-->
<!--        <div class="search-area">-->
<!--          <el-input-->
<!--              v-model="searchQuery"-->
<!--              placeholder="请输入商品名称进行搜索"-->
<!--              style="width: 300%; height: 50px;"-->
<!--              clearable-->
<!--              @input.native="load"-->
<!--          />-->
<!--          <el-button-->
<!--              type="danger"-->
<!--              style="margin-left: 5px; border-radius: 20px; background-color: #d9534f; color: white; height: 50px;"-->
<!--              size="medium"-->
<!--              @click="searchProducts"-->
<!--              class="search-btn"-->
<!--          >-->
<!--            查询-->
<!--          </el-button>-->
<!--          <i-->
<!--              class="el-icon-shopping-cart-full shopping-cart-icon"-->
<!--              @click="goToCart"-->
<!--              style="font-size: 24px; margin-left: 10px; cursor: pointer; color: #d9534f;"-->
<!--          ></i>-->
<!--        </div>-->
<!--        &lt;!&ndash; 登录注册链接 &ndash;&gt;-->
<!--        <div class="auth-links">-->
<!--          <span @click="goToLogin" class="auth-link" style="color: #666;">登录</span>-->
<!--          <span style="margin: 0 5px;">|</span>-->
<!--          <span @click="goToRegister" class="auth-link" style="color: #666;">注册</span>-->
<!--        </div>-->
<!--        &lt;!&ndash; 联系电话 &ndash;&gt;-->
<!--        <div class="contact-info" @click="showPhoneNumber" style="margin-top: 10px;">-->
<!--          <span class="phone-icon">📞</span>-->
<!--          <span class="phone-number">商家联系电话</span>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 轮播图、公告栏和咨询功能区域 &ndash;&gt;-->
<!--    <div class="swiper-and-info-area">-->
<!--      &lt;!&ndash; 公告栏和咨询功能 &ndash;&gt;-->
<!--      <div class="announcement-and-consultation" style="width: 45%;">-->
<!--        &lt;!&ndash; 公告栏 &ndash;&gt;-->
<!--        <div-->
<!--            class="announcement-area"-->
<!--            style="width: 90%; height: 320px; background-color: #f9f9f9; padding: 15px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); animation: glow 2s infinite alternate;"-->
<!--        >-->
<!--          <div class="announcement-content">-->
<!--            <p style="font-weight: bold; color: #d9534f;">尊敬的顾客们：</p>-->
<!--            <p style="color: #444;">-->
<!--              感谢您选择我们的商城！为了让您享受更加优质的购物体验，我们定期更新商品信息，并提供最新活动通知。以下是近期的一些重要公告，请您留意：</p>-->
<!--            <p style="color: #333;">1. 新品上市</p>-->
<!--            <p style="color: #666;">-->
<!--              春季新品系列：我们刚刚上架了一批春季新品，包括各种新款手机，女装和生活用品，周边。欢迎各位顾客前来选购，享受春日的美好时光！</p>-->
<!--            <p style="color: #333;">2. 特价促销</p>-->
<!--            <p style="color: #666;">限时折扣：从即日起至本月底，全场精选商品享受 8-->
<!--              折优惠。特别推荐我们的淘京和电子产品，折扣力度更大，不容错过！</p>-->
<!--            <p style="color: #333;">满额赠礼：单笔订单金额满500元，即可获赠精美小礼品一份，数量有限，先到先得！</p>-->
<!--            <p style="color: #333;">隐私保护：我们承诺严格保护您的个人信息安全，不会泄露给第三方。请放心购物！</p>-->
<!--            <p style="color: #444;">如果您有任何疑问或需要帮助，请随时联系我们的客服团队。祝您购物愉快！</p>-->
<!--          </div>-->
<!--        </div>-->
<!--        &lt;!&ndash; 咨询功能 &ndash;&gt;-->
<!--        <div class="consultation-area">-->
<!--          <el-button type="primary" @click="openConsultation">在线咨询</el-button>-->
<!--        </div>-->
<!--        <div>如有问题请拨打：8887878688</div>-->
<!--      </div>-->
<!--      &lt;!&ndash; 轮播图 &ndash;&gt;-->
<!--      <div class="swiper-container" style="width: 55%; display: flex; justify-content: center;">-->
<!--        <swiper :options="swiperOptions" ref="mySwiper">-->
<!--          <swiper-slide v-for="slide in slides" :key="slide.id">-->
<!--            <img :src="getSlideImageUrl(slide)" alt="轮播图" class="swiper-img">-->
<!--          </swiper-slide>-->
<!--          <div class="swiper-pagination" slot="pagination"></div>-->
<!--          <div class="swiper-button-prev" slot="button-prev"></div>-->
<!--          <div class="swiper-button-next" slot="button-next"></div>-->
<!--        </swiper>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 商品卡片区域 &ndash;&gt;-->
<!--    <div class="card-container">-->
<!--      <el-card-->
<!--          v-for="shop in tableData"-->
<!--          :key="shop.id"-->
<!--          :style="{ width: '23%', margin: '10px' }"-->
<!--          @click="goToDetails(shop.id)"-->
<!--          class="product-card"-->
<!--          :class="{ 'is-hovered': hoveredCardId === shop.id }"-->
<!--          @mouseover="hoveredCardId = shop.id"-->
<!--          @mouseleave="hoveredCardId = null"-->
<!--      >-->
<!--        <img :src="getShopImageUrl(shop)" alt="" class="card-image">-->
<!--        <div class="card-content">-->
<!--          <div class="shop-productName">{{ shop.productName }}</div>-->
<!--          <div class="shop-storeName">{{ shop.storeName }}</div>-->
<!--          <div class="shop-price">-->
<!--            <span>价格：</span>{{ shop.price }}<span>元</span>-->
<!--          </div>-->
<!--          <div class="product-description">-->
<!--            {{ shop.description || '暂无详细描述，更多惊喜等你发现😉' }}-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-card>-->
<!--    </div>-->
<!--    &lt;!&ndash; 分页区域 &ndash;&gt;-->
<!--    <div v-if="showPagination" class="pagination-area">-->
<!--      <el-pagination-->
<!--          v-model:current-page="currentPage"-->
<!--          v-model:page-size="pageSize"-->
<!--          :page-sizes="[5, 10, 20]"-->
<!--          :small="small"-->
<!--          :disabled="disabled"-->
<!--          :background="background"-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          :total="total"-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"-->
<!--      />-->
<!--    </div>-->
<!--    &lt;!&ndash; 商标区域 &ndash;&gt;-->
<!--    <div class="logo-area" v-if="showLogo" transition="fade">-->
<!--      <span class="logo-text" style="color: #d9534f;">ANSP</span>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import request from "@/utils/request";-->
<!--import router from "@/router";-->
<!--import {Swiper, SwiperSlide} from "vue-awesome-swiper";-->
<!--import "swiper/swiper-bundle.css";-->

<!--export default {-->
<!--  name: "Home",-->
<!--  components: {-->
<!--    Swiper,-->
<!--    SwiperSlide,-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      searchQuery: "",-->
<!--      searchByCategory: "",-->
<!--      name: "",-->
<!--      currentPage: 1,-->
<!--      total: 10,-->
<!--      pageSize: 12,-->
<!--      tableData: [],-->
<!--      hoveredCardId: null,-->
<!--      showLogo: false,-->
<!--      categories: [-->
<!--        {label: "种类: ", value: ""},-->
<!--        {label: "性爱用品", value: "性爱用品"},-->
<!--        {label: "零食", value: "零食"},-->
<!--        {label: "女装", value: "女装"},-->
<!--        {label: "电脑", value: "电脑"},-->
<!--        {label: "电视", value: "电视"},-->
<!--        {label: "模型", value: "模型"},-->
<!--        {label: "卡通", value: "卡通"},-->
<!--      ],-->
<!--      slides: [-->
<!--        {id: 1, imageUrl: "assets/img/6c83673107aeea55.jpg"},-->
<!--        {id: 2, imageUrl: "assets/img/动漫商城海报图 (1).jpeg"},-->
<!--        {id: 3, imageUrl: "assets/img/动漫商城海报图.jpeg"},-->
<!--      ],-->
<!--      swiperOptions: {-->
<!--        autoplay: {-->
<!--          delay: 3000,-->
<!--          disableOnInteraction: false,-->
<!--        },-->
<!--        loop: true,-->
<!--        pagination: {-->
<!--          el: ".swiper-pagination",-->
<!--          clickable: true,-->
<!--        },-->
<!--        navigation: {-->
<!--          nextEl: ".swiper-button-next",-->
<!--          prevEl: ".swiper-button-prev",-->
<!--        },-->
<!--      },-->
<!--      history: JSON.parse(localStorage.getItem("searchHistory")) || [],-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    handleSizeChange() {-->
<!--      this.load();-->
<!--    },-->
<!--    handleCurrentChange() {-->
<!--      this.load();-->
<!--    },-->
<!--    load() {-->
<!--      request.get("/user/productSelectPage", {-->
<!--        params: {-->
<!--          pageNumber: this.currentPage,-->
<!--          pageSize: this.pageSize,-->
<!--          search: this.searchQuery,-->
<!--        },-->
<!--      }).then((res) => {-->
<!--        this.tableData = res.data.list;-->
<!--        this.total = res.data.total;-->
<!--      });-->
<!--    },-->
<!--    goToDetails(id) {-->
<!--      this.$router.push({path: "/ProductDetailInfo", query: {id: id}});-->
<!--    },-->
<!--    getCardWidth(id) {-->
<!--      const windowWidth = window.innerWidth;-->
<!--      const baseWidth = 200;-->
<!--      const variation = Math.sin(id * 0.1) * 30;-->
<!--      if (windowWidth >= 1200) {-->
<!--        return baseWidth + variation;-->
<!--      } else if (windowWidth >= 992) {-->
<!--        return baseWidth + variation;-->
<!--      } else if (windowWidth >= 768) {-->
<!--        return baseWidth + variation;-->
<!--      } else {-->
<!--        return windowWidth * 0.9;-->
<!--      }-->
<!--    },-->
<!--    searchProducts() {-->
<!--      if (this.searchQuery.trim()) {-->
<!--        this.addHistory(this.searchQuery);-->
<!--      }-->
<!--      request.get("/user/searchByName", {-->
<!--        params: {-->
<!--          name: this.searchQuery,-->
<!--        },-->
<!--      }).then((res) => {-->
<!--        this.tableData = res.data.list;-->
<!--        this.total = res.data.total;-->
<!--      });-->
<!--    },-->
<!--    searchProductByCategory(category) {-->
<!--      request.get("/user/getProductByCategory", {-->
<!--        params: {-->
<!--          category: category,-->
<!--        },-->
<!--      }).then((res) => {-->
<!--        this.tableData = res.data.list;-->
<!--        this.total = res.data.total;-->
<!--      });-->
<!--    },-->
<!--    showLogoAfterDelay() {-->
<!--      setTimeout(() => {-->
<!--        this.showLogo = true;-->
<!--      }, 500);-->
<!--    },-->
<!--    getSlideImageUrl(slide) {-->
<!--      return slide.imageUrl.startsWith("http") ? slide.imageUrl : require(`@/${slide.imageUrl}`);-->
<!--    },-->
<!--    getShopImageUrl(shop) {-->
<!--      return shop.imageUrl.startsWith("http") ? shop.imageUrl : require(`@/${shop.imageUrl}`);-->
<!--    },-->
<!--    querySearch(queryString, cb) {-->
<!--      const results = queryString-->
<!--          ? this.history.filter(item => item.toLowerCase().includes(queryString.toLowerCase()))-->
<!--          : this.history;-->
<!--      cb(results);-->
<!--    },-->
<!--    handleSelect(item) {-->
<!--      this.searchQuery = item;-->
<!--      this.searchProducts();-->
<!--    },-->
<!--    addHistory(query) {-->
<!--      if (!this.history.includes(query)) {-->
<!--        this.history.push(query);-->
<!--        localStorage.setItem("searchHistory", JSON.stringify(this.history));-->
<!--      }-->
<!--    },-->
<!--    goToCart() {-->
<!--      this.$router.push({path: "/cart"});-->
<!--    },-->
<!--    showPhoneNumber() {-->
<!--      alert("商家联系电话: 123-456-7890");-->
<!--    },-->
<!--    goToLogin() {-->
<!--      this.$router.push({path: "/UserLogin"});-->
<!--    },-->
<!--    goToRegister() {-->
<!--      this.$router.push({path: "/UserRegister"});-->
<!--    },-->
<!--    openConsultation() {-->
<!--      // 这里可以添加打开咨询窗口的逻辑，比如弹出一个对话框或者跳转到一个咨询页面-->
<!--      alert("在线咨询功能暂未实现，敬请期待！");-->
<!--    },-->
<!--  },-->
<!--  created() {-->
<!--    this.load();-->
<!--    window.addEventListener("resize", this.getCardWidth);-->
<!--    this.showLogoAfterDelay();-->
<!--    document.addEventListener('click', this.showLogoAfterDelay);-->
<!--  },-->
<!--  beforeDestroy() {-->
<!--    window.removeEventListener("resize", this.getCardWidth);-->
<!--    document.removeEventListener('click', this.showLogoAfterDelay);-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--/* 头部区域样式 */-->
<!--.header-area {-->
<!--  background-color: #fff;-->
<!--  padding: 50px;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);-->
<!--  margin-bottom: 20px;-->
<!--  position: relative;-->
<!--  animation: fadeInDown 1s ease-in-out;-->
<!--}-->

<!--.header-content {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  position: relative;-->
<!--}-->

<!--.store-name.animated-text {-->
<!--  font-size: 48px;-->
<!--  font-weight: bold;-->
<!--  color: #444;-->
<!--  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);-->
<!--  animation: fadeInUp 1s ease-in-out;-->
<!--}-->

<!--.category-list {-->
<!--  margin-top: 10px;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  animation: fadeInLeft 1s ease-in-out;-->
<!--}-->

<!--.category-item {-->
<!--  font-size: 16px;-->
<!--  font-weight: bold;-->
<!--  color: #333;-->
<!--  margin: 0 10px;-->
<!--  cursor: pointer;-->
<!--  transition: color 0.3s;-->
<!--  animation: fadeInLeft 1s ease-in-out;-->
<!--}-->

<!--.category-item:hover {-->
<!--  color: #d9534f;-->
<!--}-->

<!--.search-area {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  animation: fadeInRight 1s ease-in-out;-->
<!--}-->

<!--.search-btn {-->
<!--  border-radius: 20px;-->
<!--  transition: background-color 0.3s;-->
<!--  animation: pulse 1s infinite alternate;-->
<!--}-->

<!--.search-btn:hover {-->
<!--  background-color: #c9433f;-->
<!--}-->

<!--.shopping-cart-icon {-->
<!--  font-size: 24px;-->
<!--  margin-left: 10px;-->
<!--  cursor: pointer;-->
<!--  color: #d9534f;-->
<!--  transition: color 0.3s;-->
<!--  animation: tada 1s infinite alternate;-->
<!--}-->

<!--.shopping-cart-icon:hover {-->
<!--  color: #c9433f;-->
<!--}-->

<!--.auth-links {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  animation: fadeInRight 1s ease-in-out;-->
<!--}-->

<!--.auth-link {-->
<!--  margin: 5px 0;-->
<!--  font-size: 16px;-->
<!--  color: #666;-->
<!--  cursor: pointer;-->
<!--  transition: color 0.3s;-->
<!--  animation: fadeInRight 1s ease-in-out;-->
<!--}-->

<!--.auth-link:hover {-->
<!--  color: #c9433f;-->
<!--}-->

<!--.contact-info {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  cursor: pointer;-->
<!--  color: #d9534f;-->
<!--  font-size: 16px;-->
<!--  transition: color 0.3s;-->
<!--  animation: fadeInRight 1s ease-in-out;-->
<!--}-->

<!--.contact-info:hover {-->
<!--  color: #c9433f;-->
<!--}-->

<!--.phone-icon {-->
<!--  margin-right: 5px;-->
<!--}-->

<!--/* 轮播图、公告栏和咨询功能区域样式 */-->
<!--.swiper-and-info-area {-->
<!--  display: flex;-->
<!--  animation: fadeInUp 1s ease-in-out;-->
<!--}-->

<!--.swiper-container {-->
<!--  max-width: none;-->
<!--  height: 500px;-->
<!--  position: relative;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);-->
<!--  border-radius: 8px;-->
<!--  overflow: hidden;-->
<!--  animation: zoomIn 1s ease-in-out;-->
<!--}-->

<!--.swiper-img {-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  object-fit: cover;-->
<!--  border-radius: 8px;-->
<!--  animation: fadeIn 1s ease-in-out;-->
<!--}-->

<!--.announcement-and-consultation {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: flex-start;-->
<!--  margin-left: 10px;-->
<!--  animation: fadeInLeft 1s ease-in-out;-->
<!--}-->

<!--.announcement-area {-->
<!--  background-color: #f5f5f5;-->
<!--  padding: 10px;-->
<!--  border-radius: 5px;-->
<!--  width: 100%; /* 修改此处，原先是30px，可能不太符合预期布局，这里改为100%占满父容器宽度 */-->
<!--  height: 320px;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);-->
<!--  animation: pulse 2s infinite alternate;-->
<!--}-->

<!--.consultation-area {-->
<!--  text-align: center;-->
<!--  margin-top: 10px;-->
<!--  animation: bounceIn 1s ease-in-out;-->
<!--}-->

<!--/* 商品卡片区域样式 */-->
<!--.card-container {-->
<!--  display: flex;-->
<!--  flex-wrap: wrap;-->
<!--  justify-content: space-between;-->
<!--  gap: 10px;-->
<!--  margin-top: 20px;-->
<!--  animation: fadeInUp 1s ease-in-out;-->
<!--}-->

<!--.product-card {-->
<!--  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);-->
<!--  border-radius: 8px;-->
<!--  overflow: hidden;-->
<!--  transition: transform 0.3s, box-shadow 0.3s;-->
<!--  cursor: pointer;-->
<!--  background: linear-gradient(135deg, #fff, #f9f9f9);-->
<!--  animation: flipInY 1s ease-in-out;-->
<!--}-->

<!--.product-card:hover {-->
<!--  transform: translateY(-10px);-->
<!--  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);-->
<!--}-->

<!--.product-card.is-hovered {-->
<!--  transform: scale(1.05);-->
<!--  z-index: 10;-->
<!--  animation: rubberBand 1s ease-in-out;-->
<!--}-->

<!--.card-image {-->
<!--  width: 100%;-->
<!--  height: 150px;-->
<!--  object-fit: cover;-->
<!--  border-radius: 8px 8px 0 0;-->
<!--  animation: fadeIn 1s ease-in-out;-->
<!--}-->

<!--.card-content {-->
<!--  padding: 15px;-->
<!--  animation: fadeInUp 1s ease-in-out;-->
<!--}-->

<!--.shop-productName {-->
<!--  font-size: 18px;-->
<!--  font-weight: bold;-->
<!--  margin-bottom: 10px;-->
<!--  color: #333;-->
<!--  animation: fadeInUp 1s ease-in-out;-->
<!--}-->

<!--.shop-storeName {-->
<!--  color: #777;-->
<!--  margin-bottom: 10px;-->
<!--  animation: fadeInUp 1s ease-in-out;-->
<!--}-->

<!--.shop-price {-->
<!--  color: #d9534f;-->
<!--  font-size: 16px;-->
<!--  font-weight: bold;-->
<!--  animation: fadeInUp 1s ease-in-out;-->
<!--}-->

<!--.product-description {-->
<!--  color: #666;-->
<!--  margin-top: 10px;-->
<!--  animation: fadeInUp 1s ease-in-out;-->
<!--}-->

<!--/* 分页区域样式 */-->
<!--.pagination-area {-->
<!--  margin: 20px 0;-->
<!--  text-align: center;-->
<!--  animation: fadeInUp 1s ease-in-out;-->
<!--}-->

<!--/* 商标区域样式 */-->
<!--.logo-area {-->
<!--  position: absolute;-->
<!--  bottom: 20px;-->
<!--  left: 20px;-->
<!--  opacity: 0;-->
<!--  transition: opacity 1s ease-in-out;-->
<!--  animation: fadeInLeft 1s ease-in-out;-->
<!--}-->

<!--/* 动画关键帧定义 */-->
<!--@keyframes fadeInDown {-->
<!--  from {-->
<!--    opacity: 0;-->
<!--    transform: translateY(-20px);-->
<!--  }-->
<!--  to {-->
<!--    opacity: 1;-->
<!--    transform: translateY(0);-->
<!--  }-->
<!--}-->

<!--@keyframes fadeInUp {-->
<!--  from {-->
<!--    opacity: 0;-->
<!--    transform: translateY(20px);-->
<!--  }-->
<!--  to {-->
<!--    opacity: 1;-->
<!--    transform: translateY(0);-->
<!--  }-->
<!--}-->

<!--@keyframes fadeInLeft {-->
<!--  from {-->
<!--    opacity: 0;-->
<!--    transform: translateX(-20px);-->
<!--  }-->
<!--  to {-->
<!--    opacity: 1;-->
<!--    transform: translateX(0);-->
<!--  }-->
<!--}-->

<!--@keyframes fadeInRight {-->
<!--  from {-->
<!--    opacity: 0;-->
<!--    transform: translateX(20px);-->
<!--  }-->
<!--  to {-->
<!--    opacity: 1;-->
<!--    transform: translateX(0);-->
<!--  }-->
<!--}-->

<!--@keyframes zoomIn {-->
<!--  from {-->
<!--    opacity: 0;-->
<!--    transform: scale(0.5);-->
<!--  }-->
<!--  to {-->
<!--    opacity: 1;-->
<!--    transform: scale(1);-->
<!--  }-->
<!--}-->

<!--@keyframes pulse {-->
<!--  from {-->
<!--    transform: scale(1);-->
<!--  }-->
<!--  to {-->
<!--    transform: scale(1.05);-->
<!--  }-->
<!--}-->

<!--@keyframes tada {-->
<!--  from {-->
<!--    transform: rotate(0deg);-->
<!--  }-->
<!--  to {-->
<!--    transform: rotate(-5deg) scale(1.1);-->
<!--  }-->
<!--}-->

<!--@keyframes bounceIn {-->
<!--  from {-->
<!--    opacity: 0;-->
<!--    transform: scale(0.3) translateY(-100px);-->
<!--  }-->
<!--  to {-->
<!--    opacity: 1;-->
<!--    transform: scale(1) translateY(0);-->
<!--  }-->
<!--}-->

<!--@keyframes flipInY {-->
<!--  from {-->
<!--    opacity: 0;-->
<!--    transform: perspective(400px) rotateY(90deg);-->
<!--  }-->
<!--  to {-->
<!--    opacity: 1;-->
<!--    transform: perspective(400px) rotateY(0);-->
<!--  }-->
<!--}-->

<!--@keyframes rubberBand {-->
<!--  from {-->
<!--    transform: scale(1);-->
<!--  }-->
<!--  to {-->
<!--    transform: scale(1.25) translateY(-10px) translateX(-5px) rotate(5deg);-->
<!--  }-->
<!--}-->

<!--@keyframes fadeIn {-->
<!--  from {-->
<!--    opacity: 0;-->
<!--  }-->
<!--  to {-->
<!--    opacity: 1;-->
<!--  }-->
<!--}-->
<!--</style>-->


<template>
  <div>
    <!-- 头部区域 -->
    <div class="header-area">
      <div class="header-content">
        <!-- 商城名称 -->
        <div class="store-name animated-text">淘京商城</div>
        <!-- 商品分类列表 -->
        <div class="category-list">
          <div
              class="category-item"
              v-for="category in categories"
              :key="category.value"
              @click="searchProductByCategory(category.value)"
          >
            <span v-if="category.label === '种类: '"><strong style="font-size: 20px;">{{
                category.label
              }}</strong></span>
            <span v-else>{{ category.label }}</span>
          </div>
        </div>
        <!-- 搜索区域 -->
        <div class="search-area">
          <el-input
              v-model="searchQuery"
              placeholder="请输入商品名称进行搜索"
              style="width: 300%; height: 50px;"
              clearable
              @input.native="load"
          />
          <el-button
              type="danger"
              style="margin-left: 5px; border-radius: 20px; background-color: #d9534f; color: white; height: 50px;"
              size="medium"
              @click="searchProducts"
              class="search-btn"
          >
            查询
          </el-button>
          <i
              class="el-icon-shopping-cart-full shopping-cart-icon"
              @click="goToCart"
              style="font-size: 24px; margin-left: 10px; cursor: pointer; color: #d9534f;"
          ></i>
        </div>
        <!-- 登录注册链接 -->
        <div class="auth-links">
          <span @click="goToLogin" class="auth-link" style="color: #666;">登录</span>
          <span style="margin: 0 5px;">|</span>
          <span @click="goToRegister" class="auth-link" style="color: #666;">注册</span>
        </div>
        <!-- 联系电话 -->
        <div class="contact-info" @click="showPhoneNumber" style="margin-top: 10px;">
          <span class="phone-icon">📞</span>
          <span class="phone-number">商家联系电话</span>
        </div>
      </div>
    </div>

    <!-- 轮播图、公告栏和咨询功能区域 -->
    <div class="swiper-and-info-area">
      <!-- 公告栏和咨询功能 -->
      <div class="announcement-and-consultation" style="width: 45%;">
        <!-- 公告栏 -->
        <div
            class="announcement-area"
            style="width: 90%; height: 320px; background-color: #f9f9f9; padding: 15px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); animation: glow 2s infinite alternate;"
        >
          <div class="announcement-content">
            <p style="font-weight: bold; color: #d9534f;">尊敬的顾客们：</p>
            <p style="color: #444;">
              感谢您选择我们的商城！为了让您享受更加优质的购物体验，我们定期更新商品信息，并提供最新活动通知。以下是近期的一些重要公告，请您留意：</p>
            <p style="color: #333;">1. 新品上市</p>
            <p style="color: #666;">
              春季新品系列：我们刚刚上架了一批春季新品，包括各种新款手机，女装和生活用品，周边。欢迎各位顾客前来选购，享受春日的美好时光！</p>
            <p style="color: #333;">2. 特价促销</p>
            <p style="color: #666;">限时折扣：从即日起至本月底，全场精选商品享受 8
              折优惠。特别推荐我们的淘京和电子产品，折扣力度更大，不容错过！</p>
            <p style="color: #333;">满额赠礼：单笔订单金额满500元，即可获赠精美小礼品一份，数量有限，先到先得！</p>
            <p style="color: #333;">隐私保护：我们承诺严格保护您的个人信息安全，不会泄露给第三方。请放心购物！</p>
            <p style="color: #444;">如果您有任何疑问或需要帮助，请随时联系我们的客服团队。祝您购物愉快！</p>
          </div>
        </div>
        <!-- 咨询功能 -->
        <div class="consultation-area">
          <el-button type="primary" @click="openConsultation">在线咨询</el-button>
        </div>
        <div>如有问题请拨打：8887878688</div>
      </div>
      <!-- 轮播图 -->
      <div class="swiper-container" style="width: 55%; display: flex; justify-content: center;">
        <swiper :options="swiperOptions" ref="mySwiper">
          <swiper-slide v-for="slide in slides" :key="slide.id">
            <img :src="getSlideImageUrl(slide)" alt="轮播图" class="swiper-img">
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>

    <!-- 商品卡片区域 -->
    <div class="card-container">
      <el-card
          v-for="shop in tableData"
          :key="shop.id"
          :style="{ width: '23%', margin: '10px' }"
          @click="goToDetails(shop.id)"
          class="product-card"
          :class="{ 'is-hovered': hoveredCardId === shop.id }"
          @mouseover="hoveredCardId = shop.id"
          @mouseleave="hoveredCardId = null"
      >
        <img :src="getShopImageUrl(shop)" alt="" class="card-image">
        <div class="card-content">
          <div class="shop-productName">{{ shop.productName }}</div>
          <div class="shop-storeName">{{ shop.storeName }}</div>
          <div class="shop-price">
            <span>价格：</span>{{ shop.price }}<span>元</span>
          </div>
          <div class="product-description">
            {{ shop.description || '暂无详细描述，更多惊喜等你发现😉' }}
          </div>
        </div>
      </el-card>
    </div>
    <!-- 分页区域 -->
    <div v-if="showPagination" class="pagination-area">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <!-- 商标区域 -->
    <div class="logo-area" v-if="showLogo" transition="fade">
      <span class="logo-text" style="color: #d9534f;">ANSP</span>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import router from "@/router";
import {Swiper, SwiperSlide} from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";

export default {
  name: "Home",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      searchQuery: "",
      searchByCategory: "",
      name: "",
      currentPage: 1,
      total: 10,
      pageSize: 12,
      tableData: [],
      hoveredCardId: null,
      showLogo: false,
      categories: [
        {label: "种类: ", value: ""},
        {label: "性爱用品", value: "性爱用品"},
        {label: "零食", value: "零食"},
        {label: "女装", value: "女装"},
        {label: "电脑", value: "电脑"},
        {label: "电视", value: "电视"},
        {label: "模型", value: "模型"},
        {label: "卡通", value: "卡通"},
      ],
      slides: [
        {id: 1, imageUrl: "assets/img/6c83673107aeea55.jpg"},
        {id: 2, imageUrl: "assets/img/动漫商城海报图 (1).jpeg"},
        {id: 3, imageUrl: "assets/img/动漫商城海报图.jpeg"},
      ],
      swiperOptions: {
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      history: JSON.parse(localStorage.getItem("searchHistory")) || [],
    };
  },
  methods: {
    handleSizeChange() {
      this.load();
    },
    handleCurrentChange() {
      this.load();
    },
    load() {
      request.get("/user/productSelectPage", {
        params: {
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          search: this.searchQuery,
        },
      }).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    goToDetails(id) {
      this.$router.push({path: "/ProductDetailInfo", query: {id: id}});
    },
    getCardWidth(id) {
      const windowWidth = window.innerWidth;
      const baseWidth = 200;
      const variation = Math.sin(id * 0.1) * 30;
      if (windowWidth >= 1200) {
        return baseWidth + variation;
      } else if (windowWidth >= 992) {
        return baseWidth + variation;
      } else if (windowWidth >= 768) {
        return baseWidth + variation;
      } else {
        return windowWidth * 0.9;
      }
    },
    searchProducts() {
      if (this.searchQuery.trim()) {
        this.addHistory(this.searchQuery);
      }
      request.get("/user/searchByName", {
        params: {
          name: this.searchQuery,
        },
      }).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    searchProductByCategory(category) {
      request.get("/user/getProductByCategory", {
        params: {
          category: category,
        },
      }).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    showLogoAfterDelay() {
      setTimeout(() => {
        this.showLogo = true;
      }, 500);
    },
    getSlideImageUrl(slide) {
      return slide.imageUrl.startsWith("http")? slide.imageUrl : require(`@/${slide.imageUrl}`);
    },
    getShopImageUrl(shop) {
      return shop.imageUrl.startsWith("http")? shop.imageUrl : require(`@/${shop.imageUrl}`);
    },
    querySearch(queryString, cb) {
      const results = queryString
          ? this.history.filter(item => item.toLowerCase().includes(queryString.toLowerCase()))
          : this.history;
      cb(results);
    },
    handleSelect(item) {
      this.searchQuery = item;
      this.searchProducts();
    },
    addHistory(query) {
      if (!this.history.includes(query)) {
        this.history.push(query);
        localStorage.setItem("searchHistory", JSON.stringify(this.history));
      }
    },
    goToCart() {
      this.$router.push({path: "/cart"});
    },
    showPhoneNumber() {
      alert("商家联系电话: 123-456-7890");
    },
    goToLogin() {
      this.$router.push({path: "/UserLogin"});
    },
    goToRegister() {
      this.$router.push({path: "/UserRegister"});
    },
    openConsultation() {
      // 这里可以添加打开咨询窗口的逻辑，比如弹出一个对话框或者跳转到一个咨询页面
      alert("在线咨询功能暂未实现，敬请期待！");
    },
  },
  created() {
    this.load();
    window.addEventListener("resize", this.getCardWidth);
    this.showLogoAfterDelay();
    document.addEventListener('click', this.showLogoAfterDelay);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.getCardWidth);
    document.removeEventListener('click', this.showLogoAfterDelay);
  },
};
</script>

<style scoped>
/* 头部区域样式 */
.header-area {
  background-color: #fff;
  padding: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  position: relative;
  animation: fadeInDown 1s ease-in-out;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.store-name.animated-text {
  font-size: 48px;
  font-weight: bold;
  color: #444;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), 0 0 5px #e74c3c;
  animation: fadeInUp 1s ease-in-out;
}

.category-list {
  margin-top: 10px;
  display: flex;
  align-items: center;
  animation: fadeInLeft 1s ease-in-out;
}

.category-item {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 0 10px;
  cursor: pointer;
  transition: color 0.3s;
  animation: fadeInLeft 1s ease-in-out;
}

.category-item:hover {
  color: #e74c3c;
}

.search-area {
  display: flex;
  align-items: center;
  animation: fadeInRight 1s ease-in-out;
}

.el-input {
  border: 1px solid #e74c3c;
  transition: border-color 0.3s;
}

.el-input:hover {
  border-color: #c0392b;
}

.search-btn {
  border-radius: 20px;
  background-color: #e74c3c;
  color: white;
  transition: background-color 0.3s;
  animation: pulse 1s infinite alternate;
}

.search-btn:hover {
  background-color: #c0392b;
}

.shopping-cart-icon {
  font-size: 24px;
  margin-left: 10px;
  cursor: pointer;
  color: #e74c3c;
  transition: color 0.3s;
  animation: tada 1s infinite alternate;
}

.shopping-cart-icon:hover {
  color: #c0392b;
}

.auth-links {
  display: flex;
  align-items: center;
  animation: fadeInRight 1s ease-in-out;
}

.auth-link {
  margin: 5px 0;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  transition: color 0.3s;
  animation: fadeInRight 1s ease-in-out;
}

.auth-link:hover {
  color: #e74c3c;
}

.contact-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #e74c3c;
  font-size: 16px;
  transition: color 0.3s;
  animation: fadeInRight 1s ease-in-out;
}

.contact-info:hover {
  color: #c0392b;
  text-decoration: underline;
  text-decoration-color: #e74c3c;
}

.phone-icon {
  margin-right: 5px;
}

/* 轮播图、公告栏和咨询功能区域样式 */
.swiper-and-info-area {
  display: flex;
  animation: fadeInUp 1s ease-in-out;
}

.swiper-container {
  max-width: none;
  height: 500px;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  animation: zoomIn 1s ease-in-out;
}

.swiper-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  animation: fadeIn 1s ease-in-out;
}

.announcement-and-consultation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 10px;
  animation: fadeInLeft 1s ease-in-out;
}

.announcement-area {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  height: 320px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: pulse 2s infinite alternate;
  border: 1px dashed #e74c3c;
}

.announcement-content p:first-child {
  color: #e74c3c;
  font-weight: bold;
}

.consultation-area {
  text-align: center;
  margin-top: 10px;
  animation: bounceIn 1s ease-in-out;
}

.el-button.primary {
  border: 1px solid #e74c3c;
  color: #e74c3c;
  transition: border-color 0.3s, color 0.3s;
}

.el-button.primary:hover {
  border-color: #c0392b;
  color: #c0392b;
}

/* 商品卡片区域样式 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  animation: fadeInUp 1s ease-in-out;
}

.product-card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  background: linear-gradient(135deg, #fff, #f9f9f9);
  animation: flipInY 1s ease-in-out;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) inset, 0 0 10px rgba(231, 76, 60, 0.3);
  border: 1px solid #e74c3c;
}

.product-card.is-hovered {
  transform: scale(1.05);
  z-index: 10;
  animation: rubberBand 1s ease-in-out;
}

.card-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  animation: fadeIn 1s ease-in-out;
}

.card-content {
  padding: 15px;
  animation: fadeInUp 1s ease-in-out;
}

.shop-productName {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
  animation: fadeInUp 1s ease-in-out;
}

.shop-storeName {
  color: #777;
  margin-bottom: 10px;
  animation: fadeInUp 1s ease-in-out;
}

.shop-price {
  color: #e74c3c;
  font-size: 16px;
  font-weight: bold;
  animation: fadeInUp 1s ease-in-out;
}

.product-description {
  color: #666;
  margin-top: 10px;
  animation: fadeInUp 1s ease-in-out;
}

/* 分页区域样式 */
.pagination-area {
  margin: 20px 0;
  text-align: center;
  animation: fadeInUp 1s ease-in-out;
}

.el-pagination button {
  border: 1px solid #e74c3c;
  transition: border-color 0.3s;
}

.el-pagination button:hover {
  border-color: #c0392b;
}

.el-pagination button.active {
  border-color: #c0392b;
}

/* 商标区域样式 */
.logo-area {
  position: absolute;
  bottom: 20px;
  left: 20px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  animation: fadeInLeft 1s ease-in-out;
}

.logo-text {
  color: #e74c3c;
  text-shadow: 0 0 5px rgba(231, 76, 60, 0.3);
}

/* 动画关键帧定义 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

@keyframes tada {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-5deg) scale(1.1);
  }
}

@keyframes bounceIn {
  from {
    opacity: 0;
    transform: scale(0.3) translateY(-100px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes flipInY {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateY(0);
  }
}

@keyframes rubberBand {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.25) translateY(-10px) translateX(-5px) rotate(5deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
